import { Layout, Menu } from 'antd';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import {NavLink, Route} from 'react-router-dom';
import {connect} from 'react-redux';

import './Main.css';
import SearchMenu from '../SearchMenu/SearchMenu';
import SingListMenu from '../SingListMenu/SingListMenu';
import Forum from '../Forum/Forum';
import Detail from '../SingListMenu/detail/index';
import SongList from '../../components/SongList/SongList';


const { Header, Content, Footer, Sider } = Layout;

const Main = (props) => {
  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={broken => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" ></div>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} className="menu">
          <Menu.Item key="1" icon={<UserOutlined />}>
            <NavLink activeClassName="active" to="/app/menu1">搜索</NavLink>
        </Menu.Item>
          <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          <NavLink activeClassName="active" to="/app/menu2">我的歌单</NavLink>
        </Menu.Item>
          <Menu.Item key="3" icon={<UserOutlined />}>
          <NavLink activeClassName="active" to="/app/menu3">论坛</NavLink>
        </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header className="site-layout-sub-header-background" style={{ padding: 0 }} >
          欢迎您，{props.username}!
        </Header>
        <Content className="site-layout-background" style={{margin: '24px 16px 0' }} >
          <div  style={{ padding: 24, minHeight: 360}}>
            <Route exact path="/app/menu2/detail" render={()=><Detail />} />
            <Route exact path='/app/menu1/result' render={()=><SongList /> } />
            <Route exact path="/app/menu1" render={()=><SearchMenu />} />
            <Route exact path="/app/menu2" render={()=><SingListMenu />} />
            <Route exact path="/app/menu3" render={()=><Forum />} />
        </div>
        </Content>
        <Footer style={{ textAlign: 'center',opacity: 0.4 }}>音乐网站</Footer>
      </Layout>
    </Layout>
  )
}

const mapStateToProps = (state)=>{
  return{
    username: state?.username,
    id: state?.id
  }
}


export default connect(mapStateToProps)(Main);